import React from 'react';
import PropTypes from 'prop-types';
import { Icon, Tooltip } from 'antd';
import cn from 'classnames';
import './index.less';

export const tagColors = ['#1890ff', '#75c940', '#2fbdb3', '#797ec9', '#ffaf38', '#ff4f3e'];
const specialColorMap = {
  [encodeURIComponent('国产化')]: '#75c940'
};

const Tag = props => {
  const { value = '', color = '#1890ff', closable = false, onClose } = props;

  if (!value.trim()) {
    return null;
  }

  const wrapOnClose = () => {
    if (typeof onClose === 'function') {
      return onClose;
    } else {
      return () => {};
    }
  };
  return (
    <Tooltip title={value}>
      <span
        className={cn('c-tag', { closable })}
        style={{
          color: specialColorMap[encodeURIComponent(value)] || color
        }}
      >
        {value}
        {closable && <Icon type="close-circle" className="close-circle" onClick={wrapOnClose()} />}
      </span>
    </Tooltip>
  );
};

Tag.propTypes = {
  value: PropTypes.string,
  color: PropTypes.string,
  closable: PropTypes.bool,
  onClose: PropTypes.func,
  customColor: PropTypes.string,
  customBackgroundColor: PropTypes.string
};

export default Tag;
